import { Component } from 'react';
//引入连接容器和UI的api
import { connect } from 'react-redux';
import { add, sub, addAsync } from '../../redux/actions/count';

class Count  extends Component {

  add = () => {
    const { value } = this.select
    this.props.add(parseInt(value))
  }

  sub = () => {
    const { value } = this.select
    this.props.sub(parseInt(value))
  }

  addOdd = () => {
    const { value } = this.select
    if (this.props.count % 2 != 0) {
      this.props.add(parseInt(value))
    }
  }

  addAsync = () => {
    const { value } = this.select
    this.props.addAsync(parseInt(value), 500)
  }

  render() { 
    return (
      <div>
        <h2>下面组件的人们数量为:{ this.props.person.length}</h2>
        <h2>求和为: { this.props.count }</h2>
        <select ref={dom => this.select = dom}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>&nbsp;
        <button onClick={this.add}>+</button>&nbsp;
        <button onClick={this.sub}>-</button>&nbsp;
        <button onClick={this.addOdd}>奇数时加</button>&nbsp;
        <button onClick={this.addAsync}>异步加</button>
      </div>
    );
  }
}

//UI容器
export default connect(
  //状态
  state => ({
    count: state.count,
    person: state.person
  }) ,
  //操作状态的方法
  { add, sub, addAsync }
)(Count);  
